import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"
import { validateUserNames } from "@/utils/validate"

import CommonInput from "../../common/commonInput"

const UserNames = ({ onChange, ...props }: { props?: object; onChange?: (value: string) => void }) => {
	const { newFormat } = useLocale()

	const handleChange = (e: { target: { value: string } }) => {
		const { result, err } = validateUserNames(e.target.value)

		if (err && err.msg) {
			Toast[err.type](newFormat(err.msg))
		}

		if (result && onChange) onChange(result)
	}

	const handleBlur = (e: { target: { value: string } }) => {
		const newValue = e.target.value
			.split(",")
			.filter((item: string) => item !== "")
			.join(",")

		onChange && onChange(newValue)
	}

	return (
		<CommonInput
			fieldName="userNames"
			placeholderId="dxn.game_list.member_account_more_tips"
			labelId="common.member_number"
			onChange={handleChange}
			onBlur={handleBlur}
			{...props}
		/>
	)
}

export default UserNames
